import React, {useState, useEffect} from 'react';
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment'
import axios from 'axios';

const NewPreview = (props) => {
    const [newsInfo, setnewsInfo] = useState(null)
    useEffect(()=>{
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res=>{
            setnewsInfo(res.data)
        })
    },[props.match.params.id])
    const auditList = ['未审核','审核中','已通过','未通过']
    const publishList = ['未发布', '待发布', '已上线', '已下线']
    const colorList = ["black", "orange", "green", "red"]
    return (
        <div className="site-page-header-ghost-wrapper">
            {
                newsInfo && <div>
                    <PageHeader
                    ghost={false}
                    onBack={() => window.history.back()}
                    title={newsInfo.title}
                    subTitle={newsInfo.category.title}
                    >
                    <Descriptions size="small" column={3}>
                        <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                        <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
                        <Descriptions.Item label="发布时间">{moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
                        <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                        <Descriptions.Item label="审核状态">
                            <span style={{color:colorList[newsInfo.auditState]}}>
                                {auditList[newsInfo.auditState]}
                            </span>
                        </Descriptions.Item>
                        <Descriptions.Item label="发布状态" style={{color:"red"}}>
                            <span style={{color:colorList[newsInfo.publishState]}}>
                                {publishList[newsInfo.publishState]}
                            </span>
                        </Descriptions.Item>
                        <Descriptions.Item label="访问数量">
                            <span style={{color:"seagreen"}}>
                                {newsInfo.view}
                            </span>
                        </Descriptions.Item>
                        <Descriptions.Item label="点赞数量">
                            <span style={{color:"seagreen"}}>
                                {newsInfo.star}
                            </span>    
                        </Descriptions.Item>
                        <Descriptions.Item label="评论数量" style={{color: 'seagreen'}}>
                            <span style={{color:"seagreen"}}>
                                0
                            </span>    
                        </Descriptions.Item>
                    </Descriptions>
                    </PageHeader>
                    <div className="newpreview">
                        <div dangerouslySetInnerHTML={{
                            __html:newsInfo.content
                        }} style={{padding: "5px 20px"}}>
                        </div>
                    </div>
                </div>
            }
        </div>
    );
};

export default NewPreview;